import React, { useState } from 'react'
import { connect } from 'react-redux'
import style from './style.module.css'


import { Input, Form, DatePicker, Button, Radio } from 'antd';

const PinTwo = (props) => {

    let { AddvalueName,
        AddvalueIntroduction,
        AddvalueUnit,
        AddvalueDate,
        AddvalueResults,
        AddvaluePeople,
        AddvalueLimit,
        AddvalueDan
    } = props

    const { RangePicker } = DatePicker;

    // 解构出父组件传过来的图片地址
    let { uploadUrlList } = props


    // 拼团名称状态
    const [valueName, setvalueName] = useState('');
    // 拼团简介状态
    const [valueIntroduction, setvalueIntroduction] = useState('');
    // 商品单位状态
    const [valueUnit, setvalueUnit] = useState('');
    // 活动日期状态
    const [valueDate, setvalueDate] = useState('');
    // 拼团实效默认值
    let [valueResults, setvalueResults] = useState(1);
    // 拼团人数默认值
    let [valuePeople, setvaluePeople] = useState(1);
    // 数量限制默认值
    let [valueLimit, setvalueLimit] = useState(1);
    // 单选按钮默认选中状态
    const [valueDan, setValueDan] = useState(0);

    // React Hook使用的坑，
    // 不可以把子组件的的state A通过props函数传参返回上父组件，再使用 state A 设置父组件的 state B。
    // 这样React Hook的diff算法会报错。


    // 拼团名称状态
    const handleName = (e) => {
        // console.log(e.target.value, 'e');
        setvalueName(e.target.value)

        AddvalueName(e.target.value)
    }
    // 拼团简介状态
    const handleIntroduction = (e) => {
        // console.log(e.target.value, 'e');
        setvalueIntroduction(e.target.value)

        AddvalueIntroduction(e.target.value)
    }
    // 商品单位状态
    const handleUnit = (e) => {
        // console.log(e.target.value, 'e');
        setvalueUnit(e.target.value)

        AddvalueUnit(e.target.value)
    }
    // 活动日期状态
    function handleDate(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        setvalueDate(dateString)

        AddvalueDate(dateString)
    }
    const onOk = (value) => {
        console.log('onOk: ', value);
    }
    // 拼团实效默认值
    const handleResults = (e) => {
        console.log(e.target.value, 'e');
        setvalueResults(e.target.value)

        AddvalueResults(e.target.value)
    }
    const handleResultsAdd = () => {
        let abc = valueResults = valueResults + 1
        // console.log(abc, 'abc');
        setvalueResults(abc)

        AddvalueResults(abc)
    }
    const handleResultsJian = () => {
        if (valueResults <= 1) {
            valueResults = 1
        } else {
            let efg = valueResults = valueResults - 1
            // console.log(efg, 'efg');
            setvalueResults(efg)

            AddvalueResults(efg)
        }
    }
    // 拼团人数默认值
    const handlePeople = (e) => {
        // console.log(e.target.value, 'e');
        setvaluePeople(e.target.value)

        AddvaluePeople(e.target.value)
    }
    const handlePeopleAdd = () => {
        let abc = valuePeople = valuePeople + 1
        // console.log(abc, 'abc');
        setvaluePeople(abc)

        AddvaluePeople(abc)
    }
    const handlePeopleJian = () => {
        if (valuePeople <= 1) {
            valuePeople = 1
        } else {
            let efg = valuePeople = valuePeople - 1
            // console.log(efg, 'efg');
            setvaluePeople(efg)

            AddvaluePeople(efg)
        }
    }
    // 数量限制默认值
    const handleLimit = (e) => {
        // console.log(e.target.value, 'e');
        setvalueLimit(e.target.value)

        AddvalueLimit(e.target.value)
    }
    const handleLimitAdd = () => {
        let abc = valueLimit = valueLimit + 1
        // console.log(abc, 'abc');
        setvalueLimit(abc)

        AddvalueLimit(abc)
    }
    const handleLimitJian = () => {
        if (valueLimit <= 1) {
            valueLimit = 1
        } else {
            let efg = valueLimit = valueLimit - 1
            // console.log(efg, 'efg');
            setvalueLimit(efg)

            AddvalueLimit(efg)
        }
    }
    // 单选按钮
    const handleChangeDan = (e) => {
        // console.log('radio checked', e.target.value);
        setValueDan(e.target.value);

        AddvalueDan(e.target.value)
    };



    return <div className={style.pintwo_M}>
        <div className={style.pintwo_header_M}>
            <p>商品图片：<img src={uploadUrlList} alt="" className={style.pintwo_img_M}/></p>

            <Form
                name="basic"
                autoComplete="off"
                style={{ width: 300 }}
            >
                <Form.Item
                    label="拼团名称"
                    name="value1"
                    rules={[
                        {
                            required: true,
                            message: '拼团名称不能为空!',
                        },
                    ]}
                >
                    <Input onChange={handleName} value={valueName} />
                </Form.Item>
                <Form.Item
                    label="拼团简介"
                    name="value2"
                    rules={[
                        {
                            required: true,
                            message: '拼团简介不能为空!',
                        },
                    ]}
                >
                    <Input onChange={handleIntroduction} value={valueIntroduction} />
                </Form.Item>
                <Form.Item
                    label="商品单位"
                    name="value3"
                    rules={[
                        {
                            required: true,
                            message: '商品单位不能为空!',
                        },
                    ]}
                >
                    <Input onChange={handleUnit} value={valueUnit} />
                </Form.Item>
            </Form>
            <div>
                活动日期：
                <RangePicker
                    showTime={{ format: 'HH:mm' }}
                    format="YYYY-MM-DD HH:mm"
                    onChange={handleDate}
                    onOk={onOk}
                />
            </div>
            <p className={style.pintwo_P_M}>
                拼团实效：
                <span><Button onClick={handleResultsJian}>-</Button></span>
                <span><Input style={{ width: 100, textAlign: 'center' }} onChange={handleResults} value={valueResults} /></span>
                <span><Button onClick={handleResultsAdd}>+</Button></span>
            </p>
            <p>
                拼团人数：
                <span><Button onClick={handlePeopleJian}>-</Button></span>
                <span><Input style={{ width: 100, textAlign: 'center' }} onChange={handlePeople} value={valuePeople} /></span>
                <span><Button onClick={handlePeopleAdd}>+</Button></span>
            </p>
            <p>
                数量限制：
                <span><Button onClick={handleLimitJian}>-</Button></span>
                <span><Input style={{ width: 100, textAlign: 'center' }} onChange={handleLimit} value={valueLimit} /></span>
                <span><Button onClick={handleLimitAdd}>+</Button></span>
            </p>
            <div>
            活动状态：
            <Radio.Group onChange={handleChangeDan} value={valueDan}>
                <Radio value={0}>关闭</Radio>
                <Radio value={1}>开启</Radio>
            </Radio.Group>
            </div>
        </div>
    </div>
}

export default connect((state) => {
    return {

    }
})(PinTwo)